<template>
  <view class="h-banner">
    <u-swiper
      :list="list"
      :height="height"
      :autoplay="autoplay"
      :current="current"
      :mode="mode"
      @click="clickSwiper"
	  indicator-pos="bottomRight"
	  border-radius="20"
    ></u-swiper>
  </view>
</template>

<script>
export default {
  props: {
    // 轮播列表
    swiper: {
      type: Array,
      default: [],
    },
    // 是否自动播放
    isAutoplay: {
      type: Boolean,
      default: true,
    },
    //轮播图组件高度
    sHight: Number,
    //指示器模式
    sMode: {
      type: String,
      default: "dot",
    },
  },
  data() {
    return {
      list: [],
      autoplay: true,
      current: 0,
      height: 340,
      mode: "",
    };
  },
  watch: {
    swiper: {
      handler(oldVal, newVal) {
        this.list = oldVal;
      },
      deep: true,
    },
  },
  methods: {
    clickSwiper(e){
      this.$emit('clickItem',e)
    }
  },
  mounted() {
    this.list = this.swiper;
    this.mode = this.sMode;
    this.autoplay = this.isAutoplay;
  },
};
</script>

<style lang="scss" scoped>
	.h-banner{
		height: 340rpx;
		/deep/.u-indicator-item-dot{
			background-color: #c5544a;
		}
		/deep/.u-indicator-item-dot-active{
			width: 40rpx;
		}
	}
</style>
